<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>LOL道具商城-首页</title>
  <link rel="stylesheet" href="./css/base.css">
  <link rel="stylesheet" href="./css/header.css">
  <link rel="stylesheet" href="./css/login.css">
  <link rel="stylesheet" href="./css/content.css">
  <link rel="stylesheet" href="./css/surplus.css">
</head>

<body>
  <!-- 遮罩层 -->
  <div class="large"></div>
  <!-- 楼层导航 -->
  <ol>
    <li class="ol_active">账号登录</li>
    <li>限时抢购</li>
    <li>新品上架</li>
    <li>周边商城</li>
    <li style="border-bottom: none;">精彩活动</li>
  </ol>
  <!-- 通用头部样式 -->
  <div class="menu">
    <!-- 头部信息 -->
    <div class="header">
      <!-- 左边logo -->
      <div class="logo"><a href=""></a></div>
      <!-- 搜索框 -->
      <div class="search_props">
        <input type="text" class="search" placeholder="输入道具进行搜索" value="">
        <button class="search_btn"></button>
      </div>
      <!-- 右边logo -->
      <div class="lol_logo"><a href=""></a></div>
    </div>
    <!-- 导航栏 -->
    <div class="nav">
      <ul>
        <li class="nav_active"><a href="#" style="color:#fef7ec;">首页</a></li>
        <li><a href="./html/goodsList.html">商品列表</a></li>
        <li><a href="./html/goodsDetails.html" target="_blank">商品详情</a></li>
        <li><a href="#">限时活动</a></li>
        <li><a href="#">聚豆乐园</a></li>
        <li><a href="#">周边商城</a></li>
        <li><a href="#">个人中心</a></li>
      </ul>
      <!-- 购物车 -->
      <div class="shopping_cart">
        <div></div>
        <a href="./html/goodsCart.html">购物车</a>
      </div>
    </div>
  </div>
  <!-- 登录页面 -->
  <form class="login_box" method="POST" action="/">
    <div class="close"></div>
    <h3>账户密码登录</h3>

    <label><input type="text" name="username" class="username" value="" autocomplete="off"></label>
    <span class="tips">用户名或者密码错误</span>
    <br>
    <label><input type="password" name="password" class="password" value=""></label>
    <br>
    <label class="check_box"><input type="checkbox" class="check_input" checked>&nbsp; 记住用户</label>
    <button class="username_btn">登录</button>

    <p>还没有账号？<a href="./html/register.html">点此注册</a></p>
  </form>
  <!-- 主要内容 -->
  <div class="content">
    <!-- 弹出登录界面和商品轮播 -->
    <div class="main">
      <!-- 商品分类栏 -->
      <ul class="classification">
        <li><a href="#">全部分类</a></li>
        <li><a href="#">英雄</a></li>
        <li><a href="#">表情</a></li>
        <li><a href="#">海克斯及其他</a></li>
        <li><a href="#">云顶之弈</a></li>
        <li><a href="#">皮肤</a></li>
        <li><a href="#">道具</a></li>
        <li><a href="#">守卫眼皮肤</a></li>
        <li><a href="#">道具包</a></li>
      </ul>
      <!-- 左边登录栏 -->
      <div class="left">
        <!-- 登录信息显示 -->
        <div class="login">
          <div class="qq"></div>
          <div class="qq_false">
            你还没有登录
            <a class="btn_login">立即登录</a><br>
            登录购买超值商品
          </div>
          <div class="qq_true">
            <b class="username_b">用户名</b>&nbsp; 余额:80Q币<br>
            <a class="qq_close">退出账户登录</a>
          </div>
          <div class="surprised"></div>
        </div>
        <!-- 公告栏 -->
        <div class="notice">
          <h3>
            公告
            <a href="">更多></a>
          </h3>
          <ul>
            <li><a href="#">【道聚大事】第三弹！66道具节玩法攻略！</a><i>06/03</i></li>
            <li><a href="#">道聚城新春红包天天领</a><i>06/03</i></li>
            <li><a href="#">LOL商城部分炫彩原价购买退款说明</a><i>06/03</i></li>
            <li><a href="#">支付异常公告</a><i>06/03</i></li>
          </ul>
        </div>
      </div>
      <!-- 中间轮播图 -->
      <div class="rotation">
        <ul class="rotation_img ">
          <li class="active_img"><img src="./imgs/1.jpg"></li>
          <li><img src="./imgs/2.jpg"></li>
          <li><img src="./imgs/3.jpg"></li>
          <li><img src="./imgs/4.jpg"></li>
        </ul>
        <ul class="dot">
          <li class="active_dot">神皇行者十周年限定皮肤</li>
          <li>十周年福袋</li>
          <li>魔女秘宝</li>
          <li>英雄联盟周边商城</li>
        </ul>
      </div>
      <!-- 右边推荐内容 -->
      <div class="right">
        <a href="">活动中心</a>
        <a href="" class="a1">聚豆商城</a>
        <div class="code">
          <img src="./imgs/code.png">
          <p>手机购买,更便捷</p>
        </div>
      </div>
    </div>
    <!-- 限时抢购商品列表 -->
    <div class="flash_sale">
      <!-- 标题栏 -->
      <h3 class="flash_sale_title">
        限时抢购
        <i></i>
        <a href="./html/goodsList.html" target="_blank">更多></a>
      </h3>
      <!-- 商品列表 -->
      <ul class="flash_sale_commodity">
        <li>
          <i>
            直降 <br>
            49.5Q币
          </i>
          <img src="./imgs/10.jpg" alt="">
          <p>灵魂莲花 锤石</p>
          <p><b>49.50</b><span>元&nbsp;&nbsp;<del>(99QB)</del></span></p>
          <!-- 倒计时 -->
          <p class="pp">剩余时间:&nbsp;&nbsp; <span class="count_down">3天5小时7分6秒</span></p>
          <button class="add_btn">立即购买</button>
        </li>
        <li>
          <i>
            直降 <br>
            39.5Q币
          </i>
          <img src="./imgs/11.jpg" alt="">
          <p>黑夜使者 厄斐琉斯</p>
          <p><b>39.50</b><span>元&nbsp;&nbsp;<del>(79QB)</del></span></p>
          <!-- 倒计时 -->
          <p class="pp">剩余时间:&nbsp;&nbsp; <span class="count_down">3天5小时7分6秒</span></p>
          <button class="add_btn">立即购买</button>
        </li>
        <li>
          <i>
            直降 <br>
            49.5Q币
          </i>
          <img src="./imgs/12.jpg" alt="">
          <p>弗雷尔卓德 塞拉斯</p>
          <p><b>49.50</b><span>元&nbsp;&nbsp;<del>(99QB)</del></span></p>
          <!-- 倒计时 -->
          <p class="pp">剩余时间:&nbsp;&nbsp; <span class="count_down">3天5小时7分6秒</span></p>
          <button class="add_btn">立即购买</button>
        </li>
        <li>
          <i>
            直降 <br>
            39.5Q币
          </i>
          <img src="./imgs/13.jpg" alt="">
          <p>屠龙勇士 赵信</p>
          <p><b>39.50</b><span>元&nbsp;&nbsp;<del>(79QB)</del></span></p>
          <!-- 倒计时 -->
          <p class="pp">剩余时间:&nbsp;&nbsp; <span class="count_down">3天5小时7分6秒</span></p>
          <button class="add_btn">立即购买</button>
        </li>
      </ul>
    </div>
  </div>
  <!-- 最新商品 -->
  <div class="new_goods">
    <div class="main_goods">
      <div class="left_goods">
        <h3>
          <span class="new_arrivals span_active">新品上架</span>
          <span class="popular_recommendation">热门推荐</span>
          <a href="./html/goodsList.html" target="_blank">更多></a>
        </h3>
        <div class="new_arrivals_goods">
          <dl>
            <dt>
              <img
                src="https://game.gtimg.cn/images/daoju/app/lol/medium/N-lol-undefined-100000-118606.jpg?_t=1630317025" />
            </dt>
            <dd>神凰行者 烈羽焰凰 霞 炫彩礼包</dd>
            <dd>Q币价:<span> &nbsp;&nbsp;&nbsp; 197.77 Q币</span></dd>
            <dd>微信价:<span>&nbsp; ￥191.77</span></dd>
            <dd><button class="add_btn">立即购买</button></dd>
          </dl>
          <dl>
            <dt>
              <img
                src="https://game.gtimg.cn/images/daoju/app/lol/medium/N-lol-undefined-100000-147354.jpg?_t=1630317381">
            </dt>
            <dd>神凰行者 幽羽玄凰 萨勒芬妮</dd>
            <dd>Q币价:<span> &nbsp;&nbsp;&nbsp; 197.77 Q币</span></dd>
            <dd>微信价:<span>&nbsp; ￥191.77</span></dd>
            <dd><button class="add_btn">立即购买</button></dd>
          </dl>
          <dl>
            <dt>
              <img
                src="https://game.gtimg.cn/images/daoju/app/lol/medium/N-lol-undefined-100000-149536.jpg?_t=1630316447">
            </dt>
            <dd>神凰行者 烈羽焰凰 霞</dd>
            <dd>Q币价:<span> &nbsp;&nbsp;&nbsp; 197.77 Q币</span></dd>
            <dd>微信价:<span>&nbsp; ￥191.77</span></dd>
            <dd><button class="add_btn">立即购买</button></dd>
          </dl>
          <dl>
            <dt>
              <img
                src="https://game.gtimg.cn/images/daoju/app/lol/medium/N-lol-undefined-100000-149535.jpg?_t=1630314880">
            </dt>
            <dd>神凰行者 烈羽焰凰 霞</dd>
            <dd>Q币价:<span> &nbsp;&nbsp;&nbsp; 197.77 Q币</span></dd>
            <dd>微信价:<span>&nbsp; ￥191.77</span></dd>
            <dd><button class="add_btn">立即购买</button></dd>
          </dl>
          <dl>
            <dt>
              <img src="https://game.gtimg.cn/images/daoju/app/lol/medium/N-lol-1-100000-147596.jpg?_t=1607513478">
            </dt>
            <dd>熔铁少女 沃尔</dd>
            <dd>Q币价:<span> &nbsp;&nbsp;&nbsp; 197.77 Q币</span></dd>
            <dd>微信价:<span>&nbsp; ￥191.77</span></dd>
            <dd><button class="add_btn">立即购买</button></dd>
          </dl>
          <dl>
            <dt>
              <img src="https://game.gtimg.cn/images/daoju/app/lol/medium/N-lol-1-100000-147788.jpg?_t=1611139136">
            </dt>
            <dd>破败之王 佛爷哥</dd>
            <dd>Q币价:<span> &nbsp;&nbsp;&nbsp; 197.77 Q币</span></dd>
            <dd>微信价:<span>&nbsp; ￥191.77</span></dd>
            <dd><button class="add_btn">立即购买</button></dd>
          </dl>
          <dl>
            <dt>
              <img src="https://game.gtimg.cn/images/daoju/app/lol/medium/2-81020-9.jpg?_t=1543387762">
            </dt>
            <dd>睡衣守护者 伊泽瑞尔</dd>
            <dd>Q币价:<span> &nbsp;&nbsp;&nbsp; 97.77 Q币</span></dd>
            <dd>微信价:<span>&nbsp; ￥91.77</span></dd>
            <dd><button class="add_btn">立即购买</button></dd>
          </dl>
          <dl>
            <dt>
              <img src="https://game.gtimg.cn/images/daoju/app/lol/medium/N-lol-1-100000-147354.jpg?_t=1603872543">
            </dt>
            <dd>星籁歌姬 萨勒芬妮</dd>
            <dd>Q币价:<span> &nbsp;&nbsp;&nbsp; 97.77 Q币</span></dd>
            <dd>微信价:<span>&nbsp; ￥91.77</span></dd>
            <dd><button class="add_btn">立即购买</button></dd>
          </dl>
        </div>
        <div class="popular_recommendation_goods">
          <dl>
            <dt>
              <img src="https://game.gtimg.cn/images/daoju/app/lol/medium/pkg-13893.jpg?_t=1540517446" />
            </dt>
            <dd>班德尔炮手 催石塔</dd>
            <dd>Q币价:<span> &nbsp;&nbsp;&nbsp; 97.77 Q币</span></dd>
            <dd>微信价:<span>&nbsp; ￥91.77</span></dd>
            <dd><button class="add_btn">立即购买</button></dd>
          </dl>
          <dl>
            <dt>
              <img src="https://game.gtimg.cn/images/daoju/app/lol/medium/2-89011-9.jpg?_t=1543833710">
            </dt>
            <dd>月蚀骑士 蕾欧娜</dd>
            <dd>Q币价:<span> &nbsp;&nbsp;&nbsp; 197.77 Q币</span></dd>
            <dd>微信价:<span>&nbsp; ￥191.77</span></dd>
            <dd><button class="add_btn">立即购买</button></dd>
          </dl>
          <dl>
            <dt>
              <img src="https://game.gtimg.cn/images/daoju/app/lol/medium/2-89010-9.jpg?_t=1543833685">
            </dt>
            <dd>日蚀骑士 蕾欧娜</dd>
            <dd>Q币价:<span> &nbsp;&nbsp;&nbsp; 197.77 Q币</span></dd>
            <dd>微信价:<span>&nbsp; ￥191.77</span></dd>
            <dd><button class="add_btn">立即购买</button></dd>
          </dl>
          <dl>
            <dt>
              <img src="https://game.gtimg.cn/images/daoju/app/lol/medium/pkg-13954.jpg?_t=1540952505">
            </dt>
            <dd>地狱行者 阿木木</dd>
            <dd>Q币价:<span> &nbsp;&nbsp;&nbsp; 197.77 Q币</span></dd>
            <dd>微信价:<span>&nbsp; ￥191.77</span></dd>
            <dd><button class="add_btn">立即购买</button></dd>
          </dl>
          <dl>
            <dt>
              <img src="https://game.gtimg.cn/images/daoju/app/lol/medium/6-3598-9.jpg?_t=1535955255">
            </dt>
            <dd>西部魔影 厄运金属 图标</dd>
            <dd>Q币价:<span> &nbsp;&nbsp;&nbsp; 197.77 Q币</span></dd>
            <dd>微信价:<span>&nbsp; ￥191.77</span></dd>
            <dd><button class="add_btn">立即购买</button></dd>
          </dl>
          <dl>
            <dt>
              <img src="https://game.gtimg.cn/images/daoju/app/lol/medium/pkg-13894.jpg?_t=1540517407">
            </dt>
            <dd>驯龙女巫 露露</dd>
            <dd>Q币价:<span> &nbsp;&nbsp;&nbsp; 97.77 Q币</span></dd>
            <dd>微信价:<span>&nbsp; ￥91.77</span></dd>
            <dd><button class="add_btn">立即购买</button></dd>
          </dl>
          <dl>
            <dt>
              <img src="https://game.gtimg.cn/images/daoju/app/lol/medium/2-82006-undefined.jpg?_t=1585211117">
            </dt>
            <dd>暗星 莫德凯撒</dd>
            <dd>Q币价:<span> &nbsp;&nbsp;&nbsp; 97.77 Q币</span></dd>
            <dd>微信价:<span>&nbsp; ￥91.77</span></dd>
            <dd><button class="add_btn">立即购买</button></dd>
          </dl>
        </div>
      </div>
      <div class="right_goods">
        <h3><span>热门推荐</span></h3>
        <ul>
          <li>
            <span>01</span>
            <img src="https://game.gtimg.cn/images/daoju/dbm/lol/20170216_28862_2202.jpg" alt="">
            <div>
              <h6>猩红之月 烬</h6>
              <p>Q币价：79.00 Q币</p>
              <p>微信价：<strong>￥76.63</strong></p>
            </div>
          </li>
          <li>
            <span>02</span>
            <img src="https://game.gtimg.cn/images/daoju/dbm/lol/20170315_0_5169.jpg" alt="">
            <div>
              <h6>屠龙勇士 赵信</h6>
              <p>Q币价：79.00 Q币</p>
              <p>微信价：<strong>￥76.63</strong></p>
            </div>
          </li>
          <li>
            <img src="https://game.gtimg.cn/images/daoju/dbm/lol/121003_190.jpg" alt="">
            <div>
              <span>03</span>
              <h6>死亡绽放 卡兹克</h6>
              <p>Q币价：79.00 Q币</p>
              <p>微信价：<strong>￥76.63</strong></p>
            </div>
          </li>
          <li style="border: none;">
            <span>04</span>
            <img src="https://game.gtimg.cn/images/daojushop/uploads/news/201507/20150715220820_82148.jpg" alt="">
            <div>
              <h6>泳池派对 德莱文</h6>
              <p>Q币价：79.00 Q币</p>
              <p>微信价：<strong>￥76.63</strong></p>
          </li>
        </ul>
      </div>
      <div class="right_goods">
        <h3><span>猜你喜欢</span></h3>
        <ul>
          <li>

            <img src="https://game.gtimg.cn/images/daoju/dbm/lol/11_113.jpg" alt="">
            <div>
              <h6>猩红之月 烬</h6>
              <p>Q币价：79.00 Q币</p>
              <p>微信价：<strong>￥76.63</strong></p>
            </div>
          </li>
          <li>

            <img src="https://game.gtimg.cn/images/daoju/dbm/lol/20170315_0_5169.jpg" alt="">
            <div>
              <h6>屠龙勇士 赵信</h6>
              <p>Q币价：79.00 Q币</p>
              <p>微信价：<strong>￥76.63</strong></p>
            </div>
          </li>
          <li>
            <img src="https://game.gtimg.cn/images/daoju/dbm/lol/121003_190.jpg" alt="">
            <div>

              <h6>死亡绽放 卡兹克</h6>
              <p>Q币价：79.00 Q币</p>
              <p>微信价：<strong>￥76.63</strong></p>
            </div>
          </li>
          <li style="border: none;">
            <img src="https://game.gtimg.cn/images/daojushop/uploads/news/201507/20150715220820_82148.jpg" alt="">
            <div>
              <h6>泳池派对 德莱文</h6>
              <p>Q币价：79.00 Q币</p>
              <p>微信价：<strong>￥76.63</strong></p>
          </li>
        </ul>
      </div>
    </div>
  </div>
  </div>
  <!-- 周边商品 -->
  <div class="peripheral_goods">
    <div class="main_goods">
      <!-- 标题栏 -->
      <h3>
        周边商城
        <i></i>
        <a href="">更多></a>
      </h3>
      <dl>
        <dt><img src="https://game.gtimg.cn/images/zb/x5/uploadImg/goods/201811/20181108181955_98019.jpg" alt=""></dt>
        <dd>奥德赛太空旅行便携式拖鞋 <span>￥88.00</span></dd>
      </dl>
      <dl>
        <dt><img src="https://game.gtimg.cn/images/zb/x5/uploadImg/goods/201903/20190310154345_71326.jpg" alt=""></dt>
        <dd>努努口袋T恤 <span>￥168.00</span></dd>
      </dl>
      <dl>
        <dt><img src="https://game.gtimg.cn/images/zb/x5/uploadImg/goods/202101/20210120211858_74689.jpg" alt=""></dt>
        <dd>哞利斯塔 坐姿毛绒 <span>￥238.00</span></dd>
      </dl>
      <dl>
        <dt><img src="https://game.gtimg.cn/images/zb/x5/uploadImg/goods/201909/20190918201418_79717.jpg" alt=""></dt>
        <dd>星之守护者厄运小姐T恤 <span>￥168.00</span></dd>
      </dl>
    </div>
  </div>

  <!-- 精彩活动 -->
  <div class="wonderful_activities">
    <div class="activities">
      <h3>
        精彩活动
        <i></i>
        <a href="#">更多></a>
      </h3>
      <ul>
        <li>
          <div class="lol_box">英雄联盟</div>
          <div class="conduct">火爆<br>进行中</div>
          <img src="https://game.gtimg.cn/upload/webplat/info/dj/20210910/65754851148621.jpg" alt="">
          <div class="name_p">
            <h6>五杀摇滚 III：遗失的章节</h6>
            <p>活动时间：2021-09-10~2022-09-10 <span>点赞(56665)</span></p>
          </div>
        </li>
        <li>
          <div class="lol_box">英雄联盟</div>
          <div class="conduct">火爆<br>进行中</div>
          <img src="https://game.gtimg.cn/upload/webplat/info/dj/20210903/35970340522024.jpg" alt="">
          <div class="name_p">
            <h6>神凰行者十周年限定皮肤</h6>
            <p>活动时间：2021-09-10~2022-09-10 <span>点赞(56665)</span></p>
          </div>
        </li>
        <li>
          <div class="lol_box">英雄联盟</div>
          <div class="conduct">火爆<br>进行中</div>
          <img src="https://game.gtimg.cn/upload/webplat/info/dj/20210903/54973808478746.jpg" alt="">
          <div class="name_p">
            <h6>十周年福袋</h6>
            <p>活动时间：2021-09-10~2022-09-10 <span>点赞(56665)</span></p>
          </div>
        </li>
      </ul>
    </div>
  </div>
  <!-- 尾部信息 -->
  <footer>
    <div class="foot_main">
      <ul>
        <p>我是新手</p>
        <li>如何购买</li>
        <li>如何赠送</li>
        <li>如何获取聚豆</li>
        <li></li>
      </ul>
      <ul>
        <p>个人中心</p>
        <li>发货时间</li>
        <li>如何领取</li>
        <li>补发规则</li>
        <li>Vip价定义</li>
        <li>道具状态定义</li>
      </ul>
      <ul>
        <p>支付方式</p>
        <li>支付方法</li>
        <li>购物点支付</li>
        <li>如何重置</li>
        <li></li>
        <li></li>
      </ul>
      <ul>
        <p>腾讯在线服务</p>
        <li>腾讯在线中心</li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
      <ul>
        <p>掌上道聚城</p>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
      <ul>
        <p>道聚城公众号</p>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>
  </footer>
  <script src="./libs/jquery.js"></script>
  <script src="./libs/jquery.cookie.js"></script>
  <script src="./js/index.js"></script>
</body>

</html>